<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: zhangmeng
 * @Date: 2022-08-21 12:08:39
 * @LastEditors: zhangmeng
 * @LastEditTime: 2022-08-22 08:26:27
-->
<template>
	<div class="design-panel">
		<div class="top-panel panel">
			<!-- <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="组件" name="1">
          <div class="compoent-box">
            <div class="compoent-item" v-for="(item,index) in compleList" :key="index">
              <img :src="item.src" alt="">
              <div>{{item.name}}</div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse> -->
			<div class="panel-complex">
				<div class="panel-collapse" v-for="(item, index) in complexList" :key="index">
					<div class="panel-collapse-title" @click="handleCollapse(item)">
						<span>{{ item.title }}</span>
						<svg v-if="item.show && item.complex.length > 0" t="1661753597377" class="icon"
							viewBox="0 0 1024 1024" p-id="2935" width="14" height="14">
							<path
								d="M512 714.666667c-8.533333 0-17.066667-2.133333-23.466667-8.533334l-341.333333-341.333333c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l320 317.866667 317.866667-320c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L533.333333 704c-4.266667 8.533333-12.8 10.666667-21.333333 10.666667z"
								p-id="2936" fill="#bfbfbf"></path>
						</svg>
						<svg v-else t="1661753559186" class="icon" viewBox="0 0 1024 1024" p-id="2613" width="14"
							height="14">
							<path
								d="M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z"
								p-id="2614" fill="#bfbfbf"></path>
						</svg>
					</div>
					<div class="panpel-collapse-content" v-if="item.show && item.complex.length > 0" :style="{
              borderBottom:
                index == complexList.length - 1
                  ? 'none'
                  : '1px solid rgb(219, 219, 219)',
            }">
						<div class="component-item" v-for="(item, index) in item.complex" :key="index" draggable
							@dragstart="(e) => handleDragStart(e, item)">
							<svg-icon class="component-icon" icon="text" />
							<div class="component-item-title">{{ item.title }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot-panel panel">
			<div class="panel-title">页面</div>
			<div class="panel-layer">
				<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
			</div>
		</div>
	</div>
</template>

<script>
	import ComplexList from "@/library/components";
	export default {
		props: {
			list: Array,
		},
		data() {
			return {
				key: 0,
				complexList: ComplexList(),
				compleList: [{
						name: "运营健康度",
						src: require("@/assets/demo.png"),
					},
					{
						name: "安全绿十字",
						src: require("@/assets/demo.png"),
					},
					{
						name: "团队口号",
						src: require("@/assets/demo.png"),
					},
					{
						name: "下线合格率",
						src: require("@/assets/demo.png"),
					},
					{
						name: "交付及时率",
						src: require("@/assets/demo.png"),
					},
					{
						name: "作业标识板",
						src: require("@/assets/demo.png"),
					},
				],
				data: [{
						label: "一级 1",
						children: [{
							label: "二级 1-1",
							children: [{
								label: "三级 1-1-1",
							}, ],
						}, ],
					},
					{
						label: "一级 2",
						children: [{
								label: "二级 2-1",
								children: [{
									label: "三级 2-1-1",
								}, ],
							},
							{
								label: "二级 2-2",
								children: [{
									label: "三级 2-2-1",
								}, ],
							},
						],
					},
					{
						label: "一级 3",
						children: [{
								label: "二级 3-1",
								children: [{
									label: "三级 3-1-1",
								}, ],
							},
							{
								label: "二级 3-2",
								children: [{
									label: "三级 3-2-1",
								}, ],
							},
						],
					},
				],
				defaultProps: {
					children: "children",
					label: "label",
				},
				activeNames: ['1']
			};
		},
		computed: {
			offset() {
				return `${this.key * 69 + 16}px`;
			},
		},
		methods: {
			handleNodeClick(data) {
				console.log(data);
			},
			handleChange(val) {
				console.log(val);
			},
			handle(item) {
				this.key = item.key;
			},
			// 展开组件库
			handleCollapse(item) {
				item.show = !item.show;
			},
			// 拖拽元素
			handleDragStart(e, item) {
				const data = {
					item,
					offset: {
						x: e.offsetX,
						y: e.offsetX,
					},
				};
				console.log(data)
				this.$store.dispatch("design/setDrag", data);
			},
		},
	};
</script>

<style lang="scss" scoped>
	$fontColor: rgb(102, 102, 102);

	::v-deep {
		.el-collapse-item__header {
			border: none;
			padding-left: 16px;
		}

		.el-collapse-item__wrap {
			border: none;
			padding: 0 8px;
		}
	}

	.panel-complex {
		width: 100%;
		height: calc(100% - 36px);
		overflow-y: auto;
		overflow-x: hidden;

		&::-webkit-scrollbar {
			display: none;
		}
	}

	.compoent-box {
		width: 100%;

		.compoent-item {
			float: left;
			width: 40%;
			height: 80px;
			margin-right: 20px;
			text-align: center;

			img {
				width: 100%;
				height: 50px;
			}
		}
	}

	.panel-collapse {
		width: 100%;

		.panel-collapse-title {
			width: 100%;
			height: 36px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 16px;
			padding-right: 4px;
			border-bottom: 1px solid rgb(219, 219, 219);
			line-height: 36px;
			color: $fontColor;
			font-size: 12px;
		}

		.panpel-collapse-content {
			width: 100%;
			border-bottom: 1px solid rgb(219, 219, 219);
			padding: 4px;
			transition: all 0.58s ease;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 4px;
			grid-template-rows: 70px;

			.component-item {
				width: 100%;
				height: 70px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				background: rgb(247, 247, 247);
				color: $fontColor;
				border-radius: 4px;
				cursor: pointer;

				&:active {
					cursor: grabbing;
				}
			}

			.component-icon {
				font-size: 24px;
				color: $fontColor;
			}

			.component-item-title {
				width: 100%;
				height: 20px;
				font-size: 12px;
				text-align: center;
				color: $fontColor;
			}
		}
	}

	.design-panel {
		width: 100%;
		height: 100%;

		.panel {
			width: 100%;

			.panel-title {
				padding-left: 16px;
				padding-right: 6px;
				border-top: 1px solid rgb(219, 219, 219);
				border-bottom: 1px solid rgb(219, 219, 219);
				height: 36px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: $fontColor;
				font-weight: bold;
				font-size: 12px;
			}
		}

		.top-panel {
			// height: 60%;
			overflow: hidden;
		}

		.foot-panel {
			width: 100%;
			height: 40%;

			.panel-layer {
				width: 100%;
				height: calc(100% - 36px);
				overflow-y: auto;
				overflow-x: hidden;

				.layer-item {
					width: 100%;
					height: 32px;
					padding-left: 16px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 12px;
					cursor: pointer;

					.layer-label {
						flex: 1;
						text-align: left;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.layer-icon {
						font-size: 14px;
						margin-right: 6px;
					}

					&:hover {
						background: rgb(218, 235, 254);
					}

					&.active {
						background: rgb(218, 235, 254);
					}
				}
			}
		}
	}
</style>
